<template>
    <div>{{state.mm}}</div>
</template>
<script setup>
import { reactive, onMounted, watch } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
const route = useRoute()
let state = reactive({
    mm: 'qqq'
})
onMounted(() => {
    console.log('ppppp');
    console.log(route.query);

})

watch(
    () => route.query,
    (n) => {
        console.log('watch', n);
        if (route.query.id == 1) {
            state.mm = 'nnnn'
        } else if (route.query.id == 2) {
            state.mm = 'mmmm'
        } else if (route.query.id == 3) {
            state.mm = 'llll'
        }
    }
)
onBeforeRouteUpdate((to, from, next) => {
    console.log('before', to.query);
    next()
})
</script>

<style lang='scss' scoped>

</style>